import React, { Component } from 'react'
import Home from './Home'
import ThemeContext from './context/theme-context.js'
import UserContext from './context/user-context.js'
import Profile from './Profile'
export class App extends Component {
    constructor(){
        super()
        this.state={
            info:{name:"kobe",age:30}
        }
    }
  render() {
    const { info } = this.state
    return (
      <div>
        App
        

        {/* 1. 给Home传递参数
        <Home name="why" age={18}></Home>
        
        麻烦
        <Home name={info.name} age={info.age}></Home>
         可以这样 
        <Home {...info}></Home> */}


        {/* 普通Home */}
        {/* 第二步操作: 通过ThemeContext中的Provider中的value属性为后代提供数据 */}
       <UserContext.Provider value={{nickname:"kobe",age:30}}>
       <ThemeContext.Provider value={{color:"red",fontSize:"20px"}}>
            <Home {...info}></Home>
        </ThemeContext.Provider>
       </UserContext.Provider>
       <Profile></Profile>
      </div>
     
    )
  }
}

export default App